<template>
	<view>
		<custom-header title="我的钱包" />
		<view class="_wrap">
			<view class="header">
				<view class="left">
					<view class="title">可用余额（元）</view>
					<view class="value">
						<text class="integer">1880.</text>
						<text class="decimal">00元</text>
					</view>
				</view>
				<view class="right">
					<view class="title">提现中</view>
					<view class="value">
						<text class="integer">180.</text>
						<text class="decimal">00元</text>
					</view>
				</view>
			</view>
			<view class="other">
				<view class="o1">
					<view class="list">
						<view class="value">
							<text class="integer">2888.</text>
							<text class="decimal">88元</text>
						</view>
						<view class="text">总交易额</view>
					</view>
					<view class="list">
						<view class="value">
							<text class="integer">180.</text>
							<text class="decimal">00元</text>
						</view>
						<view class="text">已结算</view>
					</view>
					<view class="list">
						<view class="value">
							<text class="integer">0.</text>
							<text class="decimal">00元</text>
						</view>
						<view class="text">结算中</view>
					</view>
				</view>
				<view class="o2">
					<view class="list">
						<view class="value">
							<text class="integer">0.</text>
							<text class="decimal">88元</text>
						</view>
						<view class="text">理赔金额</view>
					</view>
					<view class="list">
						<view class="value">
							<text class="integer">198.</text>
							<text class="decimal">00元</text>
						</view>
						<view class="text">扣款金额</view>
					</view>
					<view class="list">
						<view class="value">
							<text class="integer">8888.</text>
							<text class="decimal">88元</text>
						</view>
						<view class="text">已提现</view>
					</view>
				</view>
			</view>
			<view class="nav_wrap">
				<view
					class="nav nav01" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoWithdraw">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/wa_nav01.png" mode=""></image>
					</view>
					<view class="text">
						余额提现
					</view>
				</view>
				<view
					class="nav nav02" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoWithdrawRecord">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/wa_nav02.png" mode=""></image>
					</view>
					<view class="text">
						提现记录
					</view>
				</view>
				<view
					class="nav nav03" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoWithholdRecord">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/wa_nav03.png" mode=""></image>
					</view>
					<view class="text">
						扣款记录
					</view>
				</view>
				<view
					class="nav nav04" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoFlowRecord">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/wa_nav04.png" mode=""></image>
					</view>
					<view class="text">
						流水记录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	// 提现
	const handleGoWithdraw = ()=>{
		uni.navigateTo({
			url:'/pages/withdraw/withdraw'
		})
	}
	// 提现记录 
	const handleGoWithdrawRecord = ()=>{
		uni.navigateTo({
			url:'/pages/withdrawRecord/withdrawRecord'
		})
	}
	// 扣款记录
	const handleGoWithholdRecord = ()=>{
		uni.navigateTo({
			url:'/pages/withholdRecord/withholdRecord'
		})
	}
	// 流水记录
	const handleGoFlowRecord = ()=>{
		uni.navigateTo({
			url:'/pages/flowRecord/flowRecord'
		})
	}
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
	}
	.header{
		height: 255rpx;
		background: url('https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/wallet_bg.png');
		background-size: cover;
		border-radius: 20rpx;
		display: flex;
		.left,.right{
			flex: 1;
			text-align: center;
			color: #FFFFFF;
			.title{
				font-size: 28rpx;
				padding-top: 50rpx;
			}
			.value{
				font-weight: bold;
				padding-top: 30rpx;
				.integer{
					font-size: 48rpx;
				}
				.decimal{
					font-size: 32rpx;
				}
			}
		}
	}
	.other{
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 40rpx 20rpx;
		.o1,.o2{
			display: flex;
			.list{
				flex: 1;
				text-align: center;
				.value{
					color: #666666;
					.integer{
						font-size: 28rpx;
					}
					.decimal{
						font-size: 20rpx;
					}
				}
				.text{
					font-size: 24rpx;
					color: #999999;
					padding-top:15rpx;
				}
			}
		}
		.o2{
			padding-top: 30rpx;
		}
	}
	.nav_wrap{
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		padding: 0 20rpx;
		.nav{
			padding: 20rpx;
			flex: 1;
			text-align: center;
			.icon{
				width: 40rpx;
				height: 40rpx;
				display: flex;
				margin: 0 auto;
				align-items: center;
				image{
					display: block;
				}
			}
			.text{
				font-size: 24rpx;
				color: #666666;
				padding-top: 20rpx;
			}
		}
		.nav01 .icon image{
			width: 40rpx;
			height: 32rpx;
		}
		.nav02 .icon image{
			width: 40rpx;
			height: 38rpx;
		}
		.nav03 .icon image{
			width: 36rpx;
			height: 40rpx;
		}
		.nav04 .icon image{
			width: 32rpx;
			height: 39rpx;
		}
	}
</style>
